<template>
  <div style="height:100%;">
    <app-header></app-header>
    <div class="allTrain">
      <div class="train_div">
        <h3><span></span>报名查询</h3>
      </div>
      <group>
        <x-input title="" v-model="listQuery.idCard" required placeholder="请输入身份证号查询" ref='idcard'>
          <x-button @click.native="search" slot="right" type="primary" mini>搜&nbsp;索</x-button>
        </x-input>
      </group>
      <div style="background: #fff;">
        <div v-if="result==0" class="result">
          该账号无报名信息！
        </div>
        <div v-if="result==1" class="result">
          该账号已存在，请登录后查询报名状态！
        </div>
        <div v-if="result==2" class="result">
          该账号已报名， 请等待管理员审核！
        </div>
        <div v-if="result==3" class="result">
          该账号报名未通过，请查看原因并重新报名！
          <p style="color:red;font-size:16px;">未通过原因：{{reason}}</p>
        </div>
        <div v-if="result==4" class="result">
          请输入学员身份证号！
        </div>
      </div>
      <!--<alert v-model="showErr" title="警告" content="请输入学员身份证号"></alert>-->
    </div>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import { XInput, Group, XButton} from 'vux'
  import { SearchStudentApplyStatus } from "@/api/UserManager";

  export default {
    name: 'searchSign',
    components: {
      "app-header": Header,
      XInput, Group, XButton
    },
    data() {
      return {
        result: 9,
        reason:'',
        listQuery: {
          idCard: '',
        },
        showErr: false
      }
    },
    created() {
      this.listQuery.idCard = '';
      this.result = 9;
      this.reason = '';
    },
    methods: {
      search() {
        let that = this;        
        if (!this.$refs.idcard.valid) {
          this.result=4;
          return;
        }
        if (!this.listQuery.idCard.trim()) {
          this.result=4;
          return;
        }
        this.$vux.loading.show({
          text: "Loading"
        });
        SearchStudentApplyStatus(this.listQuery).then(response => {
          that.result = response.result;
          if (response.result == 3) {
            that.reason = response.msg;
          }
          this.$vux.loading.hide();
        })
      },
   
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allTrain {
    background: #ebeef2;
  }

  .train_div {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    margin-bottom: 2px;
    padding-top: 70px;
  }

    .train_div h3 {
      font-size: 16px;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

      .train_div h3 span {
        height: 16px;
        width: 4px;
        border-radius: 2px;
        display: block;
        background: #2269ff;
        margin-right: 5px;
      }

  .result {
    font-size: 16px;
    text-align:center;
    padding-top:0.3rem;
    line-height: 0.6rem;
  }
  
</style>
